<template>
  <view class="index-background">
    <view class="content">
      <uni-group 
        v-for="(group, index) in list"
        :key="index"
        mode="card"
        title=""
        top="60"
        :title="group.title"
      >
        <view class="card-content">
          <view 
            v-for="(item, sub) in group.children"
            :key="index + '-' + sub"
            class="card-item"
            @click="jumpTo(item)"
          >
            <text>{{ item.title }}</text>
          </view>
          <view v-if="!group.children || group.children.length == 0" class="card-empty">
            <text>功能开发中，敬请期待...</text>
          </view>
        </view>
      </uni-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      list: []
    }
  },
  onLoad() {
		
    this.list = [
      {
        title: '内网导航',
        children: [
          {title: 'ESXi', url: 'http://192.168.6.10'},
          {title: '爱快', url: 'http://192.168.6.1'},
          {title: 'iStoreOS', url: 'http://192.168.6.2'},
          {title: '群晖', url: 'http://192.168.6.6:5000'}
        ]
      },
      {
        title: '群晖导航',
        children: [
          {title: '群晖', url: 'http://nas.lanbitou.top:5000/'},
          {title: 'IPTV', url: 'http://nas.lanbitou.top:20230/iptv/views/index.php'},
          {title: 'qBittorrent', url: 'http://nas.lanbitou.top:8085/'}
        ]
      },
      {
        title: '便捷工具',
        children: []
      }
    ]
  },
  methods: {
    jumpTo(item) {
      window.open(item.url)
    }
  }
}
</script>

<style>
	.index-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: url();
		background-size: cover;
		background-position: center;
		background-repeat: repeat;
		height: 100vh;
	}
	
	.content {
		padding: 0 100rpx;
		height: 100%;
		overflow: auto;
	}
	
	.card-content {
		display: flex;
		flex-wrap: wrap;
		margin-left: -32rpx;
		margin-top: -32rpx;
		justify-content: center;
	}
	.card-item {
		margin-left: 32rpx;
		margin-top: 32rpx;
		width: 200rpx;
		border-radius: 5px;
		overflow: hidden;
		padding: 32rpx;
		display: flex;
		justify-content: center;
		border: 1px solid #fff;
		cursor: pointer;
	}
	.card-item:hover {
		background-color: #eee;
		color: #666;
	}
	.card-empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;
	}
</style>
